@include("template::My.views.header")  
<link href="/mycms/cms/theme/My/assets/css/share.css?time={{time()}}" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.6/swiper-bundle.min.css" rel="stylesheet">
            <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"></script>
            <style>
 
     .swiper-slide {
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      border-radius:16px;
    }

	.swiper-slide-active,.swiper-slide-duplicate-active{
        border-radius:16px;
        height: 321px;
        background: #fff;
	}
    .swiper-slide-active,.swiper-slide-duplicate-active img{
        border-radius:16px;
        height:  321px;
	}
    .swiper{
        overflow:visible;
    }
    .swiper-slide-prev{
        height:  226px;
        padding-top: 34px;
        margin-top: 34px;
    }
    .swiper-slide-next{
        height:  226px;
        padding-top: 34px;
        margin-top: 34px;
    }
  </style>
</head>
<body class="bg-gradient-to-b from-[#FFFFFF] to-[#EAF0FF]  min-h-full  pt-[27px] overflow-hidden">
  <div class="container mx-auto  rounded-2xl  swiper  w-[242px] h-[321px] ">
            <div class="swiper-wrapper rounded-t-2xl " >
                @if($list)
                @foreach($list as $ad)
            	 <div class="swiper-slide overflow-hidden "><img src="{{route('d.qrcode',['id'=>$id,'url'=>$ad->img])}}"></div>
                @endforeach
                @else
                 <div class="swiper-slide overflow-hidden ">暂无海报</div>
                @endif
            </div>
            <!--<div class="swiper-pagination"></div>-->
        </div>
        
        <div class="container mx-auto  mt-10  flex items-center  justify-center  ">
            <button id="savebtn"  disabled  class="bg-[#3368FD]   rounded-full shadow-xl shadow-blue-400/30 w-60  h-11  text-white font-medium text-[19px]">长按图片 即可保存</button>
        </div>
        <div class="container mx-auto w-11/12 rounded-2xl bg-white mt-10  h-56 p-5 mb-10">
            <h2 class="font-extrabold mb-5 text-[15px]  ">邀请说明</h2>
           <p class="text-[#0B0B0B]   text-[13.3px] font-medium leading-[24px]">
            1.专属海报中的二维码已经包含您的邀请信息，直 接保存即可；<br>
            2.每邀请一名同学报名，可增加+20能量值，邀请越 多能量值越多；
           </p>
        </div>
        <br> <br> <br> <br> <br> <br>
<script>
      var mySwiper = new Swiper ('.swiper', {
              // direction: 'vertical', // 垂直切换选项
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true, // 循环模式选项
               autoplay:true,
               preventClicks : false,
                   // 如果需要分页器
            
               pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
               
           
               // // 如果需要前进后退按钮
               // navigation: {
               //   nextEl: '.swiper-button-next',
               //   prevEl: '.swiper-button-prev',
               // },
               
               // // 如果需要滚动条
               // scrollbar: {
               //   el: '.swiper-scrollbar',
               // },
             })  
 
             function d(){
                  @foreach($list as $k=>$ad)
                 downLoad("{{route('d.qrcode')}}?url={{$ad->img}}",{{$k}});
                 @endforeach
                 
             }
             function downLoad(url,k){
                var oA = document.createElement("a");
               // oA.download = k;// 设置下载的文件名，默认是'下载'
                oA.href = url;
                document.body.appendChild(oA);
                oA.longtap();
                oA.remove(); // 下载之后把创建的元素删除
            }
</script>
@include("template::My.views._footer")